<template>
  <el-tabs
    v-model="activeTab"
    class="std-prescription-tabs-info"
    type="card"
  >
    <el-tab-pane
      v-for="tab in pageData.dTableConfig"
      :key="tab.key"
      :name="tab.key"
      :label="tab.name"
      class="h-full"
    >
      <!--   table start   -->
      <el-table
        v-loading="loading"
        v-horizontal-scroll="'always'"
        :data="pageData.formData.body[tab.key]"
        element-loading-text="加载中..."
        :stripe="true"
        :border="true"
        :fit="true"
        class="ik-list-table min-h-50v"
        height="100%"
        :header-row-class-name="'ik-list-table-header-row'"
        :header-cell-class-name="'ik-list-table-header-cell'"
        :row-class-name="'ik-list-table-body-row'"
        :cell-class-name="'ik-list-table-body-cell'"
        :highlight-current-row="true"
      >
        <!--    行操作列 start    -->
        <el-table-column
          v-if="pageData.mode!=='details'"
          prop="plus"
          label="操作"
          align="center"
          width="180"
        >
          <!--    头部操作 start    -->
          <template #header>
            <div class="button-action">
              <span class="option-label">操作</span>
              <el-button
                circle
                class="option-btn"
                title="添加首行"
                @click="addRow(tab.key, -1)"
              >+
              </el-button>
            </div>
          </template>
          <!--    头部操作 end    -->
          <template #default="scope">
            <div class="button-action">
              <el-button circle class="option-large-btn" @click.stop="addRow(tab.key, scope.$index)">+
              </el-button>
              <el-button circle class="option-large-btn" @click.stop="delRow(tab.key, scope.$index)">-
              </el-button>
            </div>
          </template>
        </el-table-column>
        <!--    行操作列 end    -->
        <template v-for="(column,index) in tab.columns">
          <ik-column-id
            v-if="column.type==='id'"
            :key="index"
            :code="column.code"
            :name="column.name"
            v-bind="column.config"
            :edit="pageData.mode !== 'details'"
          />
          <ik-column-image-oss
            v-else-if="column.type==='oss'"
            :key="index"
            :code="column.code"
            :name="column.name"
            v-bind="column.config"
            :edit="pageData.mode !== 'details'"
          />
          <ik-column-number
            v-else-if="column.type==='number'"
            :key="index"
            :code="column.code"
            :name="column.name"
            v-bind="column.config"
            :edit="pageData.mode !== 'details'"
          />
          <ik-column-datetime
            v-else-if="column.type==='datetime'"
            :key="index"
            :code="column.code"
            :name="column.name"
            v-bind="column.config"
            :edit="pageData.mode !== 'details'"
          />
          <ik-column-group
            v-else-if="column.type==='group'"
            :key="index"
            :code="column.code"
            :data-down="listLoading"
            :name="column.name"
            v-bind="column.config"
            :edit="pageData.mode !== 'details'"
          />
          <ik-column-video-oss
            v-else-if="column.type==='video'"
            :key="index"
            :code="column.code"
            key-field="key"
            value-field="value"
            :name="column.name"
            v-bind="column.config"
            :edit="pageData.mode !== 'details'"
          />
          <ik-column-time
            v-else-if="column.type==='time'"
            :key="index"
            :code="column.code"
            key-field="key"
            value-field="value"
            :name="column.name"
            v-bind="column.config"
            :edit="pageData.mode !== 'details'"
          />
          <ik-column-select
            v-else-if="column.type==='select'"
            :key="index"
            :code="column.code"
            key-field="key"
            value-field="value"
            :name="column.name"
            v-bind="column.config"
            :edit="pageData.mode !== 'details'"
          />
          <ik-table-popup
            v-else-if="column.type==='popup'"
            :key="index"
            :code="column.code"
            :name="column.name"
            v-bind="column.config"
            :edit="pageData.mode !== 'details'"
            :search="{}"
            v-on="column.handleEvent"
          />
          <ik-column-text
            v-else
            :key="index"
            :code="column.code"
            :name="column.name"
            v-bind="column.config"
            :edit="pageData.mode !== 'details'"
          />
        </template>
      </el-table>
      <!--   table end   -->
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  name: "IkDTable",
  inject: ["pageData"],
  data() {
    return {
      activeTab: "po",
      loading: false,
      listLoading: false
    }
  },
  created() {
    this.pageData.dTableConfig.forEach(tab => {
      this.pageData.formData.body[tab.key] = []
    })
    this.activeTab = this.pageData.dTableConfig[0].key
  },
  methods: {
    /**
     * 新增行按钮
     * @param curr
     * @param index
     */
    addRow(curr, index) {
      this.pageData.formData.body[curr].splice(index + 1, 0, {})
    },
    /**
     * 删除行按钮
     * @param curr
     * @param index
     */
    delRow(curr, index) {
      this.pageData.formData.body[curr].splice(index, 1)
    }
  }
}
</script>

<style scoped lang="scss">
.std-prescription-tabs-info {
  height: 50vh;
}

.button-action {
  .option-label {
    padding: 0 12px
  }

  .option-btn {
    width: 26px;
    height: 26px;
    color: #409EFF;
    padding: 3px 0;
    margin-top: 3px
  }

  .option-large-btn {
    width: 28px;
    height: 28px;
    color: #409EFF;
    padding: 3px 0;
    margin-top: 3px
  }
}
</style>
